import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';
import {Button, Toast, Modal} from '@ant-design/react-native';
import Colors from '@/Themes/Colors';
import RnBarcodeScanner from './rnBarcodeScanner';
import RackMaterialStore from './rackMaterialStore';

const styles = StyleSheet.create({
  infoText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: Colors.green100,
  },
});
export default function RackMoveConfirmButton({
  onPressable,
  rackActionText,
  loading,
  confirmText,
  onConfirm,
}) {
  const rackmatStore = RackMaterialStore.useStore();
  const [scanVisible, setScanVisible] = useState(false);
  return (
    <Button
      type="primary"
      key="scan"
      loading={loading}
      onPress={() => {
        const pressable = onPressable();
        if (pressable) {
          setScanVisible(true);
        }
      }}>
      {rackActionText}
      <Modal
        visible={scanVisible}
        onClose={() => {
          setScanVisible(false);
        }}>
        <RnBarcodeScanner
          scanProcessing={rackmatStore.getRackByTid.loading}
          topContent={<Text style={styles.infoText}>扫描即将移至架位条码</Text>}
          onBarCodeRead={async (barcode) => {
            const rackRes = await rackmatStore.getRackByTid(barcode);
            if (rackRes.errorCode) {
              Toast.fail('扫码获取架位信息失败,请重试');
              setScanVisible(false);
            } else {
              Modal.alert(
                `架位: ${rackRes.data.storeName} - ${rackRes.data.asdSubName}`,
                confirmText,
                [
                  {
                    text: '确认',
                    onPress: () => {
                      setScanVisible(false);
                      onConfirm();
                    },
                  },
                ],
              );
            }
          }}
          onExitScan={() => {
            setScanVisible(false);
          }}
        />
      </Modal>
    </Button>
  );
}
